<template>
  <div class="todo-app">
    <h1>待办事项列表</h1>
    <TodoInput @add-todo="addTodo" />
    <TodoItemList :todos="todos" @toggle-completion="toggleCompletion" @delete-todo="deleteTodo" />
  </div>
</template>

<script setup lang="ts">
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import { ref } from 'vue';
import TodoInput from '../components/ToDoInput.vue';
import TodoItemList from '../components/ToDoItemList.vue';

// 定义待办事项类型
interface Todo {
  id: number; // 需要唯一标识符
  text: string;
  completed: boolean;
}

const newTodo = ref('');
const todos = ref<Todo[]>([]); // 使用类型注解

let nextId = 1; // 用于生成唯一ID

const addTodo = (todoText: string) => {
  if (todoText.trim()) {
    todos.value.push({
      id: nextId++,
      text: todoText,
      completed: false
    });
  }
};

const toggleCompletion = (index: number) => {
  todos.value[index].completed = !todos.value[index].completed;
};

const deleteTodo = (index: number) => {
  todos.value.splice(index, 1);
};
</script>

<style scoped>
.todo-app {
  width: 70%;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
}
</style>